<template>
	<view class="blindbox2" :class="{'popupShow':popupShow}">
		<view class="blindbox-top">
			<view class="blindbox-top-img">
				<view class="top-right">
					<navigator class="top-right-item" :url="'/pages/blindbox/rules-of-play/rules-of-play?id=' + id" hover-class="none">
						玩法规则
					</navigator>
					<!-- <view class="top-right-item" @click="jumpFunc(2)"><image src="/static/blindbox/right-02.png" mode="widthFix"></image> 盲盒奖品</view> -->
				</view>
				<view class="top-box">
					<!-- <image style="width: 442rpx;" src="/static/blindbox/top-box/bg.png" mode="widthFix"></image> -->
				</view>
				
				<!-- <image class="top-table" src="/static/blindbox/index-table.png" mode="widthFix"></image> -->
			</view>
<!-- 						<view class="blindbox-nav" >
				<block v-for="(el,elindex) in navList" :key="elindex" >
				    <view class="nav-list" :class="{'navOn':elindex == navIndex}" @click="navChange(el,elindex)">{{el.name}}</view>
				</block>
			</view> -->
			
			<view class="gift">
				<view class="gift-left">盲盒产出</view>
				<view class="gift-list">
					<swiper :autoplay="true" :circular="true" :interval="3000" style="width: 100%;height: 100%;"
						display-multiple-items="4" :disable-touch="disableTouch">
						<swiper-item class="gift-list-box" v-for="(item,index) in giftdata" :key="index">
							<image class="img01" :src="ImageList[item.level-1]" mode="widthFix"></image>
							<view class="gift-list-li">
								<image class="img02" :src="item.img" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="blindbox_all">
				<!-- 盲盒按钮状态 -->
				<view class="blindbox-but">
					<view class="blindbox_center notOpen" v-if="blindboxData.status == 2 ">
						<view class="notOpenBox">
							<text class="text_01">{{blindboxData.startTime.substr(5,11)}}</text>
							<text class="text_02">开启活动</text>
						</view>
					</view>
					<view class="blindbox_center" v-else-if="blindboxData.status== 3 ">
						<view class="center_box_f">
							<view class="center_box" :animation="animationData" @click="touchendfunc">
								开启盲盒
							</view>
						</view>
						<view class="center_shadow"></view>
					</view>
					<view class="blindbox_center notOpen closedClass" v-else>
						<view class="notOpenBox">
							<text class="text_02">盲盒活动已结束</text>
						</view>
					</view>
				</view>
				<!-- 盲盒奖券 -->
				<view class="raffle_coupon">
					<view class="rc_left">
						<image src="/static/blindbox/raffle-coupon.png"></image>
						<text class="word01">X</text>
						<text class="num">{{couponNum}}</text>
					</view>
					<view class="rc_right" @click="jumpFunc(4)">
						<text>更多盲盒劵</text>
						<image src="/static/blindbox/right_w.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="prize_box">
					<view class="prize_box_item p_left" @click="jumpFunc(3)">我的奖品</view>
					<!-- <navigator url="/pages/blindbox/blind-box-prize/blind-box-prize" class="prize_box_item p_right" >盲盒奖品</navigator> -->
					<view class="prize_box_item p_right" @click="jumpFunc(2)">盲盒奖品</view>
				</view>
				
				  <view class="red_envelopes" v-if="blindboxData.jackpotEnableStatus == 1">
						<view class="red_eTitle">盲盒奖池活动</view>
						<view class="red_envelopes_title">{{jackpotInfo.stageName}}开奖<text
								v-if="jackpotInfo.stageBalance!=0">(剩余{{jackpotInfo.stageBalance}}元)</text></view>
						<view class="main_detail_one_progress">
							<view class="progress_box">
								<view class="progress_box_detail" :style="{width: progress+'%'}"></view>
								<view class="envelopes_box" :style="{left: item.leftWidth+'%'}" v-for="(item,jIndex) in jackpotList"
									:key="jIndex">
									<image class="envelopes_img" :src="item.img" mode="" v-if="jackpotList.length>0">
									</image>
									<view class="envelopes_num">
										<text>{{item.money}}</text>
										<text style="font-size: 16rpx;">万</text>
									</view>
								</view>
								<view class="envelopes_num_box" :style="{left: progress - 2+'%'}">
									<image class="envelopes_num_box_img" src="@/static/blindbox/jackpot/envelopes_num_box.png"
										mode=""></image>
									<view class="envelopes_num_box_num">{{jackpotInfo.accumulatedAwardPool}}元</view>
								</view>
							</view>
							<view class="progress_num">{{progress}}%</view>
						</view>
						<navigator class="red_envelopes_botton" url="/pages/blindbox/jackpot/jackpot" hover-class="none">
							查看奖池活动
						</navigator>
					</view>
					<view style="width: 100%; height: 100rpx;"></view>
				</view>
			</view>
		
		<view class="boxHome"  @click="homeFunc" >
			<image src="/static/blindbox/home.png" mode="widthFix"></image>
		</view>
		
		<view class="popupBoxBg" v-if="popupBoxStatus" @touchmove.prevent>
			<view class="popupBox">
				<view class="p_title">
					<view class="p_name">盲盒购买</view>
					<view class="p_nameCuo" @click="popupBoxStatus = false">
						<image src="/static/blindbox/close.png" mode="widthFix" ></image>
					</view>
					
				</view>
				<view class="p_body">
					<view class="p_body_item">
						<view class="item_word">单价：</view>
						<view class="item_money">
							<text>￥</text>{{paymentInfo.priceList && paymentInfo.priceList?paymentInfo.priceList[numBoxIndex].price:''}}
						</view>
					</view>
					<view class="p_body_item">
						<view class="item_word">数量：</view>
						<view class="item_num">
							<view class="num_box" v-for="(el,elIndex) in paymentInfo.priceList"
								:class="{'num_boxOn':numBoxIndex == elIndex}" @click="numBoxFun(el,elIndex)">{{el.name}}
							</view>
						</view>
					</view>
					<view class="p_body_item unsetBorder">
						<view class="item_word">盲盒券：</view>
						<view class="item_juan">
							<block v-if="paymentInfo.priceList[numBoxIndex].useCoupon == 2 && paymentInfo.couponNum > 0 && paymentInfo.status == 1">
								使用盲盒券抵扣券*1（-￥{{paymentInfo.priceList?paymentInfo.priceList[numBoxIndex].price:''}}）
							</block>
							<block v-else-if="paymentInfo.status == 3">
								今日盲盒券次数已用完
							</block>
							<block v-else-if="paymentInfo.status == 4">
								本次活动盲盒券次数已用完
							</block>
							<block v-else>
								暂无可用盲盒券
							</block>

						</view>

					</view>
					<view class="zcBox_bottom">
						<view class="gou">
							<!-- 							<view class="image-box" @click="gouFunc">
								<image :src="agreementStatus?'/static/blindbox/dui.png':'/static/blindbox/cuo.png'" mode=""></image>
							</view>
							<text>我已阅读并同意<text @click="jumptext">《神椰盲盒使用协议》</text></text> -->
						</view>
						<view class="button_box">
							<view class="button_name" @click="register">确认购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 盲盒开启动画 -->
		<uni-popup ref="popupBoxMore" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.6)">
			<view class="twoBox">
				<view class="twoBoxBox" v-if="prizeList.length==3">
					<!-- 开启数量3个时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex" style="display: flex;">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="/static/blindbox/rotateBox03.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="twoBoxBoxFive" v-else-if="prizeList.length==5">
					<!-- 开启数量5个时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex" style="display: flex;margin-bottom: 6px;">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="/static/blindbox/rotateBox03.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="twoBoxBox" v-else>
					<!-- 开启数量为其他时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="/static/blindbox/rotateBox03.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cuoImg" style="width: 68rpx; height: 68rpx; margin-top: 100rpx;">
					<view style="width: 100%; height: 100%;" @click="close('popupBoxMore')" v-show="statusBox">
						<image class="imgBox" src="/static/blindbox/cuo_w.png" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 盲盒开启动画 -->
		<uni-popup ref="popupBoxOne" type="center" :is-mask-click="isMaskClick" @maskClick="maskClick"
			:animation="false" mask-background-color="rgba(0, 0, 0, 0.6)">
			<!-- 多个盲盒开启时出现ssr的情况isMaskClick=true -->
			<view class="oneBox" v-if="isMaskClick">
				<view class="rotateBox">
					<view class="boxsheets">
						<view class="box02">
							<view class="theOtherSide">
								<view class="theOtherSideImg">
									<image class="the01" :src="boxListAllo.img"></image>
									<image class="the02" :src="boxListAllo.img" mode="widthFix"></image>
									<image class="the03" :src="ImageList[boxListAllo.level-1]" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rotateBox_word" @click="closeMore()">
					<view class="" v-show="boxListAllo.status">
						{{boxListAllo.name}}
					</view>
				</view>
				<view class="butOne" @click="closeMore()" v-show="!statusBox">
					收下
				</view>
			</view>
			<!-- 单个盲盒开启 isMaskClick=false -->
			<view class="oneBox" v-else>
				<view class="rotateBox">
					<view class="positive" :class="flipShow?'flip_active':''" @click="flipShow=true">
						<image src="/static/blindbox/rotateBox02.png" mode=""></image>
					</view>
					<!-- wordStatus -->
					<view class="box01 dc" :class="flipShow?'boxactive':''">
						<view class="box02 dc">
							<view class="theOtherSide dc">
								<view class="theOtherSideImg">
									<image class="the01" :src="boxListAllo.img"></image>
									<image class="the02" :src="boxListAllo.img" mode="widthFix"></image>
									<image class="the03" :src="ImageList[boxListAllo.level-1]" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rotateBox_word">
					<view class="mh" :class="flipShow?'mhShow':''">
						{{boxListAllo.name}}
					</view>
				</view>
				<view class="cuoImg" @click="close('popupBoxOne')"
					style="width: 68rpx; height: 68rpx; margin-top: 100rpx;">
					<image class="imgBox" src="/static/blindbox/cuo_w.png" mode=""></image>
				</view>
			</view>
		
		</uni-popup>

		<!--  -->
		<uni-popup ref="popupRealName" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去实名'" :title="'您还未实名认证'" :content="'为了更好的保障您的权益，请先进行实名认证'"
				:before-close="true" @close="close('popupRealName')"
				@confirm="confirm('/pages/my/certification/certification?blindboxStatus=true',2)"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="popupLogin" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'请先登录后进行购买/预约'"
				:before-close="true" @close="close('popupLogin')"
				@confirm="confirm('/pages/login/login?blindboxStatus=true',1)"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	const app = getApp();
	export default {
		data() {
			return {
				flipShow: false,
				wordStatus: true, //判断是否开启盲盒
				blindboxData: {}, //当前盲盒活动状态
				indexBoxInfo: {}, //奖池状态
				popupShow: false,
				popupBoxStatus: false,
				statusBox: true,
				paymentInfo: {
					couponNum: 0,
					priceList: [{
						id: '',
						name: '',
						price: '',
						useCoupon: ''
					}, ]
				}, //支付订单信息
				ImageList: [
					'/static/blindbox/my-prize-ssr.png',
					'/static/blindbox/my-prize-sr.png',
					'/static/blindbox/my-prize-r.png',
					'/static/blindbox/my-prize-a.png',
					'/static/blindbox/my-prize-b.png',
				],
				isMaskClick: false, //单个时是否允许触摸阴影关闭弹窗
				boxListAllo: {
					id: 1,
					status: false,
					level: 1,
					name: '01',
					img: ''
				}, //单个
				boxList: [], //盲盒开启数量列表
				boxListNum: 0, //盲盒数量列表
				boxListOriginal: [], //盲盒开启原始数据列表
				// navIndex: 1,
				numBoxIndex: 0, //当前选择优惠券数下标
				animationData: {}, //开启盲盒按钮动画
				animation: {}, //初始化动画实例
				agreementStatus: true, //是否勾选协议

				giftdata: [], //盲盒产出图片轮播列表
				disableTouch: true, //图片轮播是否允许触摸
				navList: [{
						id: 1,
						name: '礼物盲盒'
					},
					{
						id: 2,
						name: '福袋盲盒'
					},
					{
						id: 3,
						name: '实物盲盒'
					},
				],
				progress: 0, //进度
				jackpotList: [], //奖池数组
				jackpotInfo: [], //奖池信息
				payStatus: true, //防止点击重复
				couponNum: 0, //抽奖劵数量
				validate: {}, //效验是否 实名、
				orderId: '',
				timer: null,
				timeOp: null,
				prizeList: [],
				id:'',//盲盒活动id
				type:'',//盲盒类型
			}
		},
		mounted() {
			// this.getPrizeImgList() // 获取奖品图片轮播
			// this.getCurrentBoxActivity() // H5 当前盲盒活动
			// this.getCurrentBoxActivityJackpotList() //查询奖池信息
			// this.getIndexJackpotInfo()

			// if (e.app != undefined && e.time != undefined) {
			// 	this.getAppAndroid()
			// }
			// console.log(this.boxList.length)
			// if (this.$queue.getData('token') != undefined) {
			// 	//获取优惠券数量
			// 	this.getCouponNum()
			// 	var orderIdData = this.$queue.getData('orderIdData')
			// 	if (e.orderId != undefined && e.orderId != orderIdData) {
			// 		this.orderId = e.orderId
			// 		this.$queue.setData('orderIdData', e.orderId)
			// 		this.getBuyBox() //开启盲盒
			// 	}
			// }

		},
		created() {
			// 初始化一个动画
			var animation = uni.createAnimation({
				transformOrigin: "ease-in",
				duration: 200, //动画持续1秒
				// timingFunction: 'linear',  //linear 全程匀速运动
				// delay:300  //延迟两秒执行动画
			})
			this.animation = animation
		},
		onHide() {
			clearTimeout(this.timeOp);
			uni.hideLoading()
		},
		methods: {
			openRef(e,id,type) { //从父组件过来执行的方法
				console.log('id++++',id)
				this.id = id
				this.type = type
				this.getPrizeImgList(id) // 获取奖品图片轮播
				this.getCurrentBoxActivity(id) // H5 当前盲盒活动
				// this.getCurrentBoxActivityJackpotList()
				// this.getIndexJackpotInfo()
				if (e.app != undefined && e.time != undefined) {
					this.getAppAndroid()
				}
				console.log(this.boxList.length)
				if (this.$queue.getData('token') != undefined) {
					//获取优惠券数量
					this.getCouponNum(id)
					var orderIdData = this.$queue.getData('orderIdData')
					if (e.orderId != undefined && e.orderId != orderIdData) {
						this.orderId = e.orderId
						this.$queue.setData('orderIdData', e.orderId)
						this.getBuyBox(id) //开启盲盒
					}
				}
			},
			// 获取Android 信息
			getAppAndroid() {
				var token = window.Android.onGetToken();
				this.$queue.setData('token', token)
				this.$queue.setData('app', 'android')
				// this.$queue.setData('token',)
				//获取优惠券数量
				this.getCouponNum()
				var orderIdData = this.$queue.getData('orderIdData')
				if (e.orderId != undefined && e.orderId != orderIdData) {
					this.orderId = e.orderId
					this.$queue.setData('orderIdData', e.orderId)
					this.getBuyBox() //开启盲盒
				}
			},
			// 获取奖品图片轮播
			getPrizeImgList(id) {
				let data = {
					boxActivityId: id
				}
				this.$api.getPrizeImgList(data).then(res => {
					this.giftdata = res.result
					if (this.giftData != null && this.giftData.length > 4) {
						this.disableTouch = false
					} else {
						this.disableTouch = true
					}
					// console.log(res)

				})
			},
			// H5 当前盲盒活动
			async getCurrentBoxActivity() {
				uni.showLoading()
				var res = await this.$api.getCurrentBoxActivity(this.id)
				this.blindboxData = res.result
				uni.hideLoading()
				setTimeout(()=>{
					uni.hideLoading()
				},4000)
				if (this.$queue.getData('token') != undefined) {
					//获取优惠券数量
					this.getBoxActivityPrice()
				}
			},
			// H5 盲盒购买价格列表
			async getBoxActivityPrice() {
				// console.log(this.blindboxData)
				var data = await this.$api.getBoxActivityPrice(this.blindboxData.id)
				this.paymentInfo = data.result
			},
			// H5 盲盒购买优惠劵数量
			async getCouponNum() {
				var data = await this.$api.getCouponNum()
				if (data.result != '') {
					this.couponNum = data.result
				} else {
					this.couponNum = 0
				}

			},
			//转跳 
			async jumpFunc(num) {
				this.validate = await app.validate_realName_login()
				// console.log( this.validate )
				if (this.validate.login == false) {
					this.open('popupLogin')
					return false
				} else if (this.validate.realName == false) {
					this.open('popupRealName')
					return false
				}

				if (num == 1) {
					uni.navigateTo({
						url: '/pages/blindbox/rules-of-play/rules-of-play?id=' + this.id
					})
				} else if (num == 2) {
					uni.navigateTo({ //跳转盲盒奖品
						url: '/pages/blindbox/blind-box-prize/blind-box-prize?id=' + this.id + '&type=' + this.type
					})
				} else if (num == 3) { //跳转我的奖品
					uni.navigateTo({
						url: '/pages/blindbox/my-prize/my-prize?id=' + this.id + '&type=' + this.type
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '/pages/blindbox/daily-tasks/daily-tasks'
					})
				}
			},
			openBoxFunc() {
				// console.log('6666')
				// this.wordStatus01 = true
				if (this.isMaskClick) {
					this.dgXh()
				}
				// this.wordStatus = true


			},
			dgXh() {
				// console.log("this.boxListNum=========",this.boxListNum)
				// console.log('this.boxListOriginal.length888', this.boxListOriginal.length)
				// console.log(this.boxListNum < this.boxListOriginal.length)
				if (this.boxListNum < this.boxListOriginal.length) {
					this.timer = setTimeout(res => {
						// console.log(this.boxListNum)
						if (this.boxListOriginal[this.boxListNum].level == 1) {
							this.boxListAllo = JSON.parse(JSON.stringify(this.boxListOriginal[this.boxListNum]));
							this.$refs.popupBoxOne.open()
							this.boxListAllo.status = true
							this.boxListOriginal[this.boxListNum].status = true
							this.boxList = this.zhFunc(this.boxListOriginal)
							this.boxListNum++
							this.statusBox = false
						} else {
							this.boxListOriginal[this.boxListNum].status = true
							this.boxList = this.zhFunc(this.boxListOriginal)
							this.boxListNum++
							this.dgXh()
						}
					}, 300)
				}

			},
			maskClick() {
				if (this.isMaskClick) {
					// this.boxListNum++
					this.dgXh()
				}
			},
			zhFunc(array) {
				//准备二维数组
				let arr = [];
				let minArr = [];
				let num = 5
				let num1 = 2
				if (array.length == 10) {
					num = 6
				}
				if (array.length < 4) {
					num = 1
				}
				array.forEach((item, index) => {
					if (index < 3) {
						minArr.push(item)
					} else if (index < 8) {
						minArr.push(item)
					} else {
						minArr.push(item)
					}
					if (index == num1 || index == num) {
						arr.push(minArr)
						minArr = []
					}
				})
				if (minArr.length > 0) {
					arr.push(minArr)
				}
				return arr
			},
			async getBuyBox() {

				var _this = this
				uni.showLoading({
					title: '盲盒开启中',
					mask: true
				})
				var res = await this.$api.getBoxPayResult(_this.orderId)
				var dataListBox = res.result
				// dataListBox = data
				if (dataListBox) {
					uni.hideLoading()
					if (dataListBox.resultType == 1) {
						this.prizeList = dataListBox.prizeList
						var prizeList = dataListBox.prizeList
						this.boxListNum = 0
						this.getCurrentBoxActivity() //刷新当前数据
						this.getCouponNum() //刷新劵数据
						// this.getCurrentBoxActivityJackpotList()
						// this.getIndexJackpotInfo()
						if (prizeList.length == 1) {
							this.isMaskClick = false
							this.boxListAllo = prizeList[0]
							this.open('popupBoxOne')
						} else {
							this.isMaskClick = true

							prizeList = prizeList.map(el => {
								el.status = false
								return el;
							})
							this.boxListOriginal = prizeList
							this.boxList = this.zhFunc(prizeList)
							this.open('popupBoxMore')
							this.dgXh()
						}

					} else {
						uni.showToast({
							title: dataListBox.message,
							icon: 'none'
						})
					}
				} else {
					this.timeOp = setTimeout(() => {
						this.getBuyBox()
					}, 1000)
				}
			},
			// 判断返回值

			async register() {
				var _this = this
				// if(!this.agreementStatus){
				// 	this.$queue.showToast('请阅读盲盒协议并勾选协议！');
				// 	return false;
				// }
				// console.log(_this.data)
				if (wechat.isWechat()) {

					if (_this.payStatus) {

						_this.payStatus = false
						uni.showLoading({
							title: '正在请求中',
							mask: true
						})
						try {
							var data = {
								activityId: _this.blindboxData.id,
								priceId: _this.paymentInfo.priceList[_this.numBoxIndex].id
							}
							var res = {}
							if (_this.paymentInfo.priceList[_this.numBoxIndex].useCoupon == 2 && _this.paymentInfo
								.couponNum > 0 && _this.paymentInfo.status == 1) {
								res = await _this.$api.getActivityCouponPay(data)
								_this.orderId = res.result.orderId
								// _this.close('popup')
								_this.popupBoxStatus = false
								_this.getBuyBox()
								// uni.hideLoading()
							} else {
								res = await _this.$api.getActivityPay(data)
								_this.orderId = res.result.orderId
								uni.hideLoading()
								wechat.wexinPay(res.result, function(callback) {
									_this.popupBoxStatus = false
									_this.getBuyBox()

								}, function(errorCallback) {
									_this.popupShow = false
									_this.popupBoxStatus = false
								})
							}

						} catch {
							_this.popupShow = false
							_this.payStatus = true
							uni.hideLoading()
						} finally {
							setTimeout(() => {
								_this.payStatus = true
							}, 2000)
						}
					}
				} else {
					uni.showToast({
						title: '请在微信客户端中使用',
						icon: 'none'
					})
				}

			},
			// 协议选择状态
			gouFunc() {
				this.agreementStatus = !this.agreementStatus
			},
			// 点击开启盲盒数数量
			numBoxFun(item, index) {
				this.numBoxIndex = index
			},
			open(attribute) {
				if (attribute == 'popupBoxMore' || attribute == 'popupBoxOne') {
					this.popupShow = true
				}
				this.$refs[attribute].open()
			},
			close(attribute) {
				if (attribute == 'popupBoxMore' || attribute == 'popupBoxOne') {
					this.popupShow = false
					clearTimeout(this.timer);
					this.flipShow = false
					this.getCouponNum() //刷新劵数据
				}
				this.$refs[attribute].close()
			},
			closeMore() {
				this.$refs.popupBoxOne.close()
				this.statusBox = true
				this.dgXh()
			},
			confirm(url) {
				uni.navigateTo({
					url: url
				})
			},
			// navChange(el, index) {
			// 	this.navIndex = index
			// },
			// // 转跳协议
			// jumptext(){
			// 	uni.navigateTo({
			// 		url:'bindbox-text'
			// 	})
			// },
			//开启盲盒动画 
			async touchendfunc() {
				this.validate = await app.validate_realName_login()
				if (this.validate.login == false) {
					this.open('popupLogin')
					return false
				} else if (this.validate.realName == false) {
					this.open('popupRealName')
					return false
				}
				var data = await this.$api.getBoxActivityPrice(this.blindboxData.id)
				this.paymentInfo = data.result
				this.animation.translateY(0).step()
				this.animation.translateY(8).step()
				this.animation.translateY(0).step()
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.popupBoxStatus = true
				}, 1000)
			},
			//奖池首页
			async getIndexJackpotInfo() {
				const res = await this.$api.getIndexJackpotInfo();
				this.jackpotInfo = res.result
				this.progress = res.result.ratio
				uni.hideLoading()
			},
			//获取当前盲盒活动奖池信息
			async getCurrentBoxActivityJackpotList() {
				const res = await this.$api.getCurrentBoxActivityJackpotList();
				uni.hideLoading()
				this.activityJackpotList = res.result
				if (this.activityJackpotList.length != 0) {
					this.getJackpotProgress(res.result)
				}
			},
			getJackpotProgress(list) { //获取奖池进度内容
				this.jackpotList = list
				this.jackpotList.forEach((item) => {
					item.money = parseFloat((item.accumulateMoney / 10000).toFixed(2))
					// item.leftWidth = (item.accumulateMoney/this.jackpotList[this.jackpotList.length-1].accumulateMoney*100).toFixed(0)
					if ((item.accumulateMoney / this.jackpotList[this.jackpotList.length - 1].accumulateMoney *
							100).toFixed(0) >= 87) {
						item.leftWidth = 87
					} else {
						item.leftWidth = (item.accumulateMoney / this.jackpotList[this.jackpotList.length - 1]
							.accumulateMoney * 100).toFixed(0) - 4
					}
					// item.leftWith = '20'
					item.img = '../../static/blindbox/jackpot/envelopes_one.png'
				})
				if (this.jackpotList.length == 2) {
					this.jackpotList[0].img = '../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../static/blindbox/jackpot/envelopes_two.png'
				} else if (this.jackpotList.length == 3) {
					this.jackpotList[0].img = '../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[2].img = '../../static/blindbox/jackpot/envelopes_three.png'
				} else if (this.jackpotList.length == 4) {
					this.jackpotList[0].img = '../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[2].img = '../../static/blindbox/jackpot/envelopes_three.png'
					this.jackpotList[3].img = '../../static/blindbox/jackpot/envelopes_three.png'
				} else if (this.jackpotList.length == 5) {
					this.jackpotList[0].img = '../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[2].img = '../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[3].img = '../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[4].img = '../../static/blindbox/jackpot/envelopes_three.png'
				} else {
					this.jackpotList[0].leftWidth = 87
					this.jackpotList[0].img = '../../static/blindbox/jackpot/envelopes_three.png'
				}
				// console.log(this.jackpotList)
			},
			homeFunc() {
				if (this.$queue.getData('app') != '' && this.$queue.getData('app') != undefined) {

					window.Android.onFinishActivity()

				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}

			}
		}
	}
</script>


<style scoped>
	page {
		/* background: #133654; */
		height: 100%;
	}

	.popupShow {
		overflow: hidden;
		position: fixed;
		height: 100vh;
		width: 100%;
	}

	.blindbox2 {
		min-height: 100%;
		background: #133654;
	}

	.blindbox-top {
		width: 750rpx;
		background: url('/static/blindbox/football/bj.jpg') no-repeat;
		background-size: 100% 1106rpx;
		background-position: top;
	}
	
	.blindbox-top-img {
		width: 750rpx;
		height: 670rpx;
		display: flex;
		position: relative;
	}
	.blindbox-top .top-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-bottom: 192rpx;

	}
	
	.blindbox-top .top-table {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0rpx;
		/* padding-top: 160rpx; */
		width: 560rpx;
		height: 380rpx;
/* 		width: 828rpx;
		height: 502rpx; */
	}
	/* 玩法规则 */
	.top-right{
		position: absolute;
		right: 0;
		top: 40rpx;
		z-index: 99;
		width: 69rpx;
		height: 198rpx;
		background: url('/static/blindbox/football/right_line.png') no-repeat;
		background-size: 42rpx 100%;
		background-position: right;
		display: flex;
		align-items: center;
	}
	.top-right .top-right-item{
		display: flex;
		align-items: center;
		justify-content: center;
		writing-mode: vertical-rl;
		width: 54rpx;
		height: 152rpx;
		font-size: 24rpx;
		letter-spacing: 6rpx;
		color: #FFFFFF;
		background: url('/static/blindbox/football/right_box.png') no-repeat;
		background-size: 100% 100%;
		/* margin-right: 27rpx; */
	}

	/* end */
	
	/* nav */
/* 	.blindbox-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		width: 688rpx;
		height: 84rpx;
		margin: 0 auto;
		padding: 0 46rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, rgba(34, 109, 226, 0) 0%, #226DE2 20.06%, #226DE2 77.03%, rgba(34, 109, 226, 0) 100%);
		margin-top: -20rpx;
	}

	.nav-list {
		text-align: center;
		line-height: 60rpx;
	}

	.navOn {
		width: 238rpx;
		height: 60rpx;
		background: url('/static/blindbox/index_bj.png') no-repeat;
		background-size: 100% 100%;
		color: #0463DF;
	} */
	/* end */
	.blindbox_all{
		width: 100%;
		height: auto;
		background: url('/static/blindbox/football/index_bj02.png') no-repeat;
		background-size: 100% auto;
		background-position:0 60rpx;
		margin-top: 26rpx;

	}
	/* 盲盒按钮 */
	.blindbox-but {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 220rpx;
	}
	.blindbox_center {
		position: relative;
		width: 380rpx;
		height: 172rpx;
		background: url('/static/blindbox/but_bj.png') no-repeat;
		background-size: 100% auto;
		background-position: 0 36rpx;
		margin: 0 32rpx;
	}

	.notOpen {
		width: 368rpx;
		height: 158rpx;
		background: url('/static/blindbox/but_bj02.png') no-repeat;
		background-size: 100% 100%;
	}

	.notOpenBox {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.notOpenBox .text_01 {
		font-size: 32rpx;
		text-align: center;
		color: #FF3030;
		padding-top: 10rpx;
	}

	.notOpenBox .text_02 {
		font-size: 40rpx;
		text-align: center;
		color: #FF3030;
	}

	.closedClass {
		background: url('/static/blindbox/but_bj01.png') no-repeat;
		background-size: 100% 100%;
	}

	.closedClass .text_02 {
		color: #999999;
		font-weight: 600;
	}

	.center_shadow {
		position: absolute;
		z-index: 2;
		bottom: 28rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 366rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #96A3DA 2.6%, #C7AEF5 8.33%, #CC58C9 16.15%, #F256A9 25.77%, #F256A9 58.71%, #C853D5 73.42%, #E9479A 94.11%, #97A3DA 100%);
		border-radius: 0px 0px 54rpx 54rpx;
	}

	.center_box_f {
		width: 100%;
		height: 140rpx;
		z-index: 3;
		/* background-color: #0463DF; */
		position: absolute;
		display: flex;
		justify-content: center;
	}

	.center_box {
		width: 366rpx;
		height: 120rpx;
		background: linear-gradient(90.38deg, #969DE7 1.85%, #F62D89 47.6%, #D75BD8 96.78%);
		box-shadow: inset 0px 0px 26rpx #FFF4FA;
		border-radius: 200rpx;
		font-size: 52rpx;
		line-height: 120rpx;
		text-align: center;
		color: #FFFFFF;
	}
	/* 盲盒劵样式 */
	.raffle_coupon{
		width: 538rpx;
		height: 92rpx;
		background: #444CFF;
		opacity: 0.8;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		margin: 0 auto;
	}
	.rc_left {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 44rpx;
		color: #FFFFFF;
		margin-right: 56rpx;
	}
	
	.rc_left .word01 {
		font-size: 30rpx;
		margin: 0 12rpx;
	}
	.rc_left image {
		width: 120rpx;
		height: 42rpx;
	}
	.rc_right{
		width: 206rpx;
		height: 64rpx;		
		font-size: 26rpx;
		color: #fff;
		background: linear-gradient(90deg, #8769FF 4.81%, #4F8BFF 96.63%);
		border: 1rpx solid #97B6FF;
		border-radius: 200rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.rc_right image{
		width: 10rpx;
		height: 16rpx;
		margin-left: 8rpx;
		
	}
 
	/* 盲盒礼物 */
	.gift {
		width: 690rpx;
		height: 178rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: url('/static/blindbox/football/lw-bj01.png') no-repeat;
		background-size: 100% 100%;
		margin-bottom: 40rpx;
		margin: 0 auto;
	}

	.gift-left {
		font-size: 28rpx;
		color: #FFFFFF;
		writing-mode: vertical-rl;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 142rpx;
		background: url('/static/blindbox/football/lw-bj.png') no-repeat;
		background-size: 100% 100%;
		margin:0 20rpx;
	}

	.gift-list {
		width: 590rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.gift-list-box {
		width: 158rpx;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
	}

	.gift-list-li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		overflow: hidden;
		background: #FFFFFF;
		border: 3rpx solid #FFD27E;
		border-radius: 16rpx;
	}

	.gift-list-box .img01 {
		position: absolute;
		top: 18rpx;
		right: 8rpx;
		width: 44rpx;
		height: 44rpx;
		z-index: 5;
	}

	.gift-list-li .img02 {
		width: 100%;
	}
	/* end */
	/* 奖品 */
	.prize_box{
		width: 100%;
		padding: 46rpx 0 40rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		
	}
	.prize_box_item{
		width: 246rpx;
		height: 82rpx;
		font-size: 34rpx;
		line-height: 74rpx;
		text-align: center;
		border-radius: 12rpx;
	}
	.p_left{
		color: #FF0909;
		margin-right: 70rpx;
		background: url('/static/blindbox/box01.png') no-repeat;
		background-size: 100% 100%;
	}
	.p_right{
		color: #3627EB;
		background: url('/static/blindbox/box02.png') no-repeat;
		background-size: 100% 100%;
	}
	/* 盲盒奖池活动 */
	.red_envelopes {
		width: 670rpx;
		height: 476rpx;
		margin: 0 auto;
		background: url('/static/blindbox/football/red02.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 40rpx;
		box-sizing: border-box;
	}
	.red_eTitle{
		font-size: 36rpx;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		/* margin-top: 30rpx; */
		margin-bottom: 26rpx;
	}

	.red_envelopes_title {
		width: 496rpx;
		height: 64rpx;
		font-size: 30rpx;
		line-height: 64rpx;
		text-align: center;
		color: #ffffff;
		margin: 0 auto;
		margin-bottom: 42rpx;
		background: linear-gradient(90deg, rgba(101, 198, 76, 0.07) 0%, #2F9C1A 20.06%, #2F9C1A 78.96%, rgba(62, 166, 58, 0) 100%);
		/* background: linear-gradient(90deg, #5D9FF7 0%, #1F60EF 20.06%, #1F60EF 77.03%, rgba(101, 122, 247, 0) 100%); */
	}
	.red_envelopes_botton{
		width: 276rpx;
		height: 72rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 200rpx;
		font-size: 30rpx;
		line-height: 72rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
	}
	

	.main_detail_one_progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 60rpx 0 106rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
	}

	.progress_box {
		width: 528rpx;
		height: 24rpx;
		border-radius: 200rpx;
		background: #F1D6C0;
		position: relative;
	}

	.progress_box_detail {
		height: 24rpx;
		border-radius: 200rpx;
		background: linear-gradient(180deg, #F4B540 0%, #FDEA60 51.35%, #F4B540 100%);
	}

	.progress_num {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.envelopes_box {
		width: 82rpx;
		height: 56rpx;
		position: absolute;
		left: 80rpx;
		top: -14rpx;
	}

	.envelopes_img {
		width: 82rpx;
		height: 56rpx;
		position: absolute;
		left: 0rpx;
	}

	.envelopes_num {
		width: 82rpx;
		height: 56rpx;
		line-height: 74rpx;
		text-align: center;
		position: absolute;
		font-size: 20rpx;
		color: #FBFF21;
	}

	.envelopes_num_box {
		width: 106rpx;
		height: 42rpx;
		position: absolute;
		bottom: -68rpx;
		left: 0%;
		/* left: -16rpx; */
		/* margin-top: 24rpx; */
		/* margin-left: calc(20% - 54rpx); */
		/* margin-left: 70rpx */
	}
	    .envelopes_num_box_img {
	        width: 100%;
	        height: 100%;
	        position: absolute;
	    }
	    .envelopes_num_box_num {
	        width: 100%;
	        height: 100%;
	        z-index: 1;
	        font-size: 18rpx;
	        color: #FF5639;
	        text-align: center;
	        line-height: 50rpx;
	        position: absolute;
	    }
    /* end */

     /*  盲盒购买 */
	.popupBoxBg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		display: flex;
		align-items: flex-end;

	}
	.popupBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 760rpx;
		box-sizing: border-box;
		background: #ffffff;
		padding: 0 40rpx 80rpx 40rpx;
		border-radius: 24rpx 24rpx 0px 0px;
		opacity: 0;
		animation: popupActive 0.4s forwards ease-in;
	}

	@keyframes popupActive {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.p_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 36rpx;
		font-size: 34rpx;
		letter-spacing: 1px;
		color: #333333;
	}

	.p_title .p_name {
		margin-left: auto;
	}
	.p_title .p_nameCuo{
		margin-left: auto;
		width: 40rpx;
		height: 40rpx;
	}
	.p_title image {
		margin-left: auto;
		width: 28rpx;
		height: 28rpx;
	}

	.p_body {
		margin-top: 76rpx;
	}

	.p_body_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		border-bottom: 1rpx solid #EAEAEA;
	}

	.p_body_item:nth-child(3) {
		border-bottom: unset;
		padding-bottom: unset;
		margin-bottom: unset;
	}

	.item_word {
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
	}

	.item_money {
		font-size: 32rpx;
		color: #222222;
	}

	.item_money text {
		font-size: 30rpx;
		letter-spacing: 1px;
	}

	.item_num {
		display: flex;
		/* flex-direction: row; */
		width: 500rpx;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.num_box {
		padding: 4rpx 20rpx;
		border: 1rpx solid #FF5800;
		border-radius: 200rpx;
		color: #FF5800;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}

	.num_boxOn {
		background: #FF5800;
		color: #ffffff;
	}

	.item_juan {
		color: #777777;
	}

	/* 勾选协议 */
	.zcBox_bottom {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gou {
		font-size: 24rpx;
		color: #444444;
		;
		display: flex;
		flex-direction: row;
		margin-top: 120rpx;

	}

	.image-box {
		width: 26rpx;
		height: 26rpx;
		display: flex;
		align-items: center;
		margin-right: 12rpx;
	}

	.gou image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 4rpx;
	}

	/* 登录按钮 */
	.button_box {
		margin-top: 26rpx;
	}

	.button_name {
		width: 650rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
		box-shadow: 0px 8rpx 10rpx rgba(255, 96, 11, 0.2);
		border-radius: 152rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}

	/* 翻牌动画 */
	.oneBox {
		width: 100%;
		/* padding-top: 132rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rotateBox {
		position: relative;
		width: 630rpx;
		height: 734rpx;
	}
	.butOne{
		width: 270rpx;
		height: 80rpx;		
		background: linear-gradient(90deg, #2A7FFC 3.08%, #4F36E5 100%);
		border-radius: 152rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.rotateBox_word {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
	}

	.rotateBox_word .mh {
		opacity: 0;
		/* animation: mhactive 1s forwards ease-in; */
	}

	@keyframes mhactive {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
	.mhShow {
		animation: mhactive 1s forwards ease-in;
	}
	
	@keyframes mhactive {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	.dc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box01 {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		backface-visibility: hidden;
		width: 100%;
		height: 100%;
		padding: 14rpx;
		box-sizing: border-box;
		background: url('/static/blindbox/border.png') no-repeat;
		background-size: 100% 100%;
		opacity: 0;
	}
	
	.boxactive {
		animation: boxactive 0.5s forwards linear;
	}
	
	@keyframes boxactive {
		0% {
			transform: rotateY(180deg) scale(0);
			opacity: 0;
		}
	
		100% {
			transform: rotateY(0deg) scale(1);
			opacity: 1;
		}
	}
	/* 单个开启动画 */
	.boxsheets {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		/* transform: scale(0); */
		opacity: 0;
		animation: domainactive 0.7s forwards linear;
		width: 100%;
		height: 100%;
		padding: 14rpx;
		box-sizing: border-box;
		/* background: #ffffff; */
		background: url('/static/blindbox/border.png') no-repeat;
		background-size: 100% 100%;
	}
	
	@keyframes domainactive {
		0% {
			transform: scale(0);
			opacity: 0;
		}
	
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.box02 {
		width: 100%;
		height: 100%;
		/* padding: 10rpx; */
		box-sizing: border-box;
		/* background: linear-gradient(325.23deg, #FF2828 -2.46%, #FFA620 91.8%); */
	}

	.theOtherSide {
		width: 100%;
		height: 100%;
		/* padding: 10rpx; */
		box-sizing: border-box;
		/* background: linear-gradient(180deg, #892CFF 0%, #2757FF 100%); */
	}

	.theOtherSideImg {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		padding: 0 14rpx 10rpx 0
	}

	.theOtherSideImg .the01 {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		filter: blur(10rpx);
	}

	.theOtherSideImg .the02 {
		position: absolute;
		z-index: 3;
		height: 100%;
		width: 588rpx;
	}

	.theOtherSideImg .the03 {
		position: absolute;
		z-index: 4;
		left: 6rpx;
		top: 6rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.positive {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
	}
	
	.flip_active {
		animation: positiveactive 0.5s forwards linear;
	}
	
	@keyframes positiveactive {
		0% {
			transform: rotateY(0deg) scale(1);
		}
	
		100% {
			transform: rotateY(180deg) scale(1);
		}
	}

	.positive image {
		width: 100%;
		height: 100%;
	}

	/*  */
	.twoBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.twoBoxBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
	.twoBoxBoxFive {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	.twoBox_li {
		width: 220rpx;
		height: 256rpx;
		position: relative;
	}

	.zm,
	.fm {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		left: 0;
		top: 0;
		backface-visibility: hidden;
		transition: all 0.5s linear;
		box-sizing: border-box;
	}

	.zm {
		z-index: 3;
	}

	.fm {
		z-index: 2;
		/* border: 2rpx solid #ffffff; */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: scale(0);
		background: url('/static/blindbox/border.png') no-repeat;
		background-size: 100% 100%;
		padding: 3px 5px 10px 3px;
		width: 220rpx;
		height: 256rpx;
	}

	.fm .fm_img {
		width: 100%;
		height: 230rpx;
	}

	.twoBoxList {
		display: flex;
		flex-direction: column;
		margin-right: 10rpx;
	}

	.twoBox_li {
		margin-bottom: 10rpx;
	}

	.zm_no {
		transform: rotateY(180deg);
	}

	.fm_no {
		opacity: 1;
		transform: scale(1);
		/* transform: rotateY(0deg); */
	}

	.fmBox {
		position: absolute;
		z-index: 5;
		/* width: 224rpx;
		height: 134rpx; */
		width: 100%;
		height: 100%;
	}

	.fmBox image {
		position: absolute;
		left: 4rpx;
		top: 6rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.fmBoxText {
		position: absolute;
		padding: 0 12rpx;
		box-sizing: border-box;
		line-height: 34rpx;
		bottom: 0;
		width: 100%;
		height: 34rpx;
		font-size: 20rpx;
		color: #ffffff;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 85.29%);
		border-radius: 0px 0px 8rpx 8rpx;
	}
	.boxHome{
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 0;
		top: 30%;
		z-index: 12;
	}
	.boxHome image{
		width: 100%;
		height: 100%;
	}
	
</style>
